<template>
  <div class="img" style="width: 60px">
    <Avatar
      icon="ios-image-outline"
      size="large"
      :src="variable.song.value.album"
      :style="{
        transform: 'rotate(' + variable.rotateDegree.value + 'deg)',
        width: '45px',
        height: '45px',
      }"
      style="cursor: pointer"
      @on-error="zjError"
      @click="openMusicMb"
    >
    </Avatar>

    <transition name="slide-up">
      <div
        v-show="variable.musicListState.value"
        class="gqlbxd music_playlist"
        @click.stop="handleClickInsideMenu"
      >
        <div
          :id="'navGqLi_' + item.id"
          class="loader"
          v-for="(item, index) in variable.musciList.value"
          :key="item.id"
          @click="switchMusic(index, item.name)"
        >
          <div class="song">
            <Ellipsis class="name" :text="item.name" :lines="1" />
            <Ellipsis class="artist" :text="item.singer" :lines="1" />
          </div>
          <div class="albumcover">
            <img
              :src="item.album"
              style="border-radius: 10px; width: 100%; height: 100%"
            />
          </div>
          <div class="loading" v-if="variable.song.value.id === item.id">
            <div class="load"></div>
            <div class="load"></div>
            <div class="load"></div>
            <div class="load"></div>
          </div>
          <div class="play" v-else></div>
        </div>
      </div>
    </transition>
  </div>

  <div style="width: 180px">
    <div class="music">
      <div class="music_title">{{ variable.song.value.name }}</div>
      <div
        class="music_ico"
        @mouseover="hornMouseOver"
        @mouseout="hornMouseOut"
      >
        <i
          class="iconfont icon-shangyishou1"
          style="font-size: 20px"
          @click="previous"
        ></i>
        <i
          :class="variable.music_play.value"
          class="iconfont"
          style="font-size: 20px"
          @click="play"
        ></i>
        <i
          class="iconfont icon-xiayishou1"
          style="font-size: 20px"
          @click="next"
        ></i>
        <i
          :class="variable.horn.value"
          class="iconfont horn"
          style="font-size: 10px"
          @click="volume"
          v-bind:style="{ opacity: variable.hornState.value }"
        ></i>
      </div>
    </div>
  </div>

  <div>
    <i
      class="iconfont icon-yinle2"
      style="font-size: 30px"
      @click.stop="openList"
    ></i>

    <audio
      @pause="pauseYy"
      @playing="handlePlaying"
      :src="variable.song.value.url"
      id="videoMusicId"
      style="display: none"
      :volume="variable.volumeNum.value"
      @timeupdate="audioTime"
    ></audio>
  </div>

  <ul class="lyricUl" ref="lyricUlRef" v-if="variable.lyricState.value">
    <li
      class="lyricLi"
      v-for="item in variable.lyricsObjArr.value"
      :key="item.uid"
      :style="{
        color: variable.currentTime.value >= item.time ? '#fff' : '#5c5c5c',
      }"
    >
      {{ item.lyric }}
    </li>
  </ul>

  <!-- 音乐面板 -->
  <MusicMb1 v-if="variable.musicTheme.value == 1" />
  <MusicMb2 v-else />
</template>
<script setup>
import { ScrollTop, Notice } from "view-ui-plus";
import variable from "../../js/variable";
import { eventBus } from "../../js/eventBus.js";
const MusicMb1 = defineAsyncComponent(() => import("./MusicMb1.vue"));
const MusicMb2 = defineAsyncComponent(() => import("./MusicMb2.vue"));
const axios = inject("axios");

//-------------音乐播放暂停切换START-------------
function play() {
  if (!variable.sfzzbf.value) {
    variable.sfzzbf.value = true;
    document.getElementById("videoMusicId").play(); //播放
  } else {
    variable.sfzzbf.value = false;
    document.getElementById("videoMusicId").pause(); //暂停
  }
}
eventBus.on("play", play);
//----------------音乐播放暂停切换END-------------

//专辑图片加载失败回调函数
function zjError() {
  variable.song.value.album = "";
}

//专辑旋转
function zjxz() {
  //专辑旋转角度置0
  variable.rotateDegree.value = 0;
  //专辑先停止旋转
  clearInterval(variable.intervalIdMusic.value);
  //专辑开始旋转
  variable.intervalIdMusic.value = setInterval(() => {
    variable.rotateDegree.value += 1;
  }, 10);
}

//播放回调函数
function handlePlaying() {
  //设为正在播放
  variable.sfzzbf.value = true;
  //设置播放时长
  variable.song.value.duration =
    document.getElementById("videoMusicId").duration;
  //设置为暂停按钮
  variable.music_play.value = "icon-zanting1";
  //专辑旋转
  zjxz();
  //歌曲播放失败
  document
    .getElementById("videoMusicId")
    .addEventListener("error", function (event) {
      Notice.error({
        title: "歌曲播放失败，自动切换下一首",
      });
      next();
    });

  //歌曲列表定位到正在播放的歌
  document.getElementById("gqzgli_" + variable.song.value.id).scrollIntoView({
    inline: "center",
    behavior: "smooth",
  });

  //根据主题设置不同的回调
  if (variable.musicTheme.value == 1) {
    bfhd1();
  } else {
    bfhd2();
  }
}

//主题1的播放回调方法
function bfhd1() {
  //设置正在播放的歌的按钮为暂停
  setGqli();
  //歌曲列表中的歌专辑开始旋转,先移除正在旋转的，再添加
  var kzansArr = Array.from(document.getElementsByClassName("wxxz"));
  if (kzansArr.length != 0) {
    kzansArr[0].classList.remove("wxxz");
  }
  document
    .getElementById("gqimg_" + variable.song.value.id)
    .classList.add("wxxz");
}

//主题2的播放回调方法
function bfhd2() {
  //歌曲列表对应的歌播放按钮改为暂停按钮（逻辑：先重置所有图标，再设置正在播放的歌）
  setKzans();
  //设置正在播放的歌的按钮为暂停
  setGqli();
}

//歌曲列表对应的歌播放按钮改为暂停按钮（逻辑：先重置所有图标，再设置正在播放的歌）
function setKzans() {
  var kzansArr = Array.from(document.getElementsByClassName("kzans"));
  kzansArr.forEach((kzans) => {
    if (kzans.classList.contains("icon-zanting1")) {
      kzans.classList.add("icon-bofang1");
      kzans.classList.remove("icon-zanting1");
    }
  });
}

//设置正在播放的歌的按钮为暂停
function setGqli() {
  document
    .getElementById("gqli_" + variable.song.value.id)
    .classList.add("icon-zanting1");
  document
    .getElementById("gqli_" + variable.song.value.id)
    .classList.remove("icon-bofang1");
}
eventBus.on("setGqli", setGqli);

//监听当前播放的歌曲
watch(variable.song, (newValue, oldValue) => {
  variable.lyricsObjArr.value.splice(0, variable.lyricsObjArr.value.length); //先清空歌词
  //处理歌词 字符串转数组
  if (variable.song.value.lyric) {
    const lyricsArr = variable.song.value.lyric.split("♡").filter(Boolean);
    lyricsArr.forEach((item) => {
      if (item === "") return;
      const obj = {};
      const time = item.match(/\[\d{2}:\d{2}.\d{2,3}\]/);
      obj.lyric =
        item.split("]")[1].trim() === "" ? "" : item.split("]")[1].trim();
      obj.time = time
        ? formatLyricTime(time[0].slice(1, time[0].length - 1))
        : 0;
      obj.uid = Math.random().toString().slice(-6);
      if (obj.lyric != "") {
        variable.lyricsObjArr.value.push(obj);
      }
    });
  }

  if (variable.musicTheme.value == 2) {
    //音乐面板中的背景设置专辑图片
    document.getElementById("bg_player").style.display = "none";
    setTimeout(() => {
      document.getElementById("bg_player").style.display = "block";
    }, 1000);
  }
});

//暂停回调函数
function pauseYy() {
  //将图标改为播放按钮
  variable.music_play.value = "icon-bofang1";
  //专辑停止旋转
  clearInterval(variable.intervalIdMusic.value);
  //设为当前未播放
  variable.sfzzbf.value = false;

  //主题1的
  if (variable.musicTheme.value == 1) {
    //先将正在播放的图标恢复（歌曲列表）
    setKzans();
  }
}

const lyricUlRef = ref(null); // 歌单ul标签Dom

//实时获取歌曲播放时间进度
function audioTime(e) {
  var time = e.target.currentTime; //当前播放器时间
  variable.currentTime.value = time;
  variable.timeBfb.value = (time / variable.song.value.duration) * 100; //计算实时播放进度（百分比）

  //----处理页面底部的歌词-----------
  // 获取所有颜色为白色的歌词li元素
  const lyricLiCollection = document.getElementsByClassName("lyricLi");
  const redLiArray = Array.from(lyricLiCollection).filter(
    (li) => li.style.color === "rgb(255, 255, 255)"
  );
  const redLiCount = redLiArray.length;
  //根据白色li个数定位到指定的位置
  ScrollTop(lyricUlRef.value, {
    to: (redLiCount - 1) * 20,
    time: 1000,
  });
  //----处理页面底部的歌词end-----------

  // 处理音乐面板中的歌词
  for (var i = 0; i < variable.lyricsObjArr.value.length; i++) {
    // 遍历歌词列表
    if (time <= variable.lyricsObjArr.value[i].time) {
      if (i > 0) {
        //改变当前播放的歌词颜色
        document.getElementById("geci" + (i - 1).toString()).style.color =
          "#42BD81";
      }
      if (i > 1) {
        //修改已播放的歌词颜色  透明
        document.getElementById("geci" + (i - 2).toString()).style.color =
          "hsla(0,0%,88.2%,.5)";
      }
      if (i > 3) {
        // 计算当前文字绝对高度
        var current_height = i * 30;
        // 滚动滚动条
        document.getElementById("geci").scrollTop = current_height - 30 * 3;
        //修改已播放的歌词颜色  透明
        document.getElementById("geci" + (i - 2).toString()).style.color =
          "hsla(0,0%,88.2%,.8)";
        document.getElementById("geci" + (i - 3).toString()).style.color =
          "hsla(0,0%,88.2%,.5)";
      }
      break;
    }
  }
}

// 格式化歌词的时间 转换成 sss:ms
function formatLyricTime(time) {
  const regMin = /.*:/;
  const regSec = /:.*\./;
  const regMs = /\./;
  const min = parseInt(time.match(regMin)[0].slice(0, 2));
  let sec = parseInt(time.match(regSec)[0].slice(1, 3));
  const ms = time.slice(
    time.match(regMs).index + 1,
    time.match(regMs).index + 3
  );
  if (min !== 0) {
    sec += min * 60;
  }
  return Number(sec + "." + ms);
}

onMounted(() => {
  //查询歌曲列表
  axios
    .post("/music/findMusic", { pageSize: 999 })
    .then((response) => {
      let res = response.data;
      if (res.code == 200 && res.msg == "成功") {
        variable.musciList.value = res.data.records;
        //默认第一首为设为正在播放
        variable.song.value = res.data.records[0];
      }
    })
    .catch();

  // 在组件挂载时监听音乐播放结束事件
  document.getElementById("videoMusicId").addEventListener("ended", () => {
    next();
  });
});

//------------------上一首START--------------------
function previous() {
  // 找到当前播放歌曲在列表中的索引
  const currentIndex = variable.musciList.value.findIndex(
    (item) => item.id === variable.song.value.id
  );
  // 计算上一首歌曲的索引
  const previousIndex =
    (currentIndex - 1 + variable.musciList.value.length) %
    variable.musciList.value.length;
  // 更新当前播放歌曲
  variable.song.value = variable.musciList.value[previousIndex];
  // 直接开始播放
  setTimeout(() => {
    variable.music_play.value = "icon-zanting1";
    document.getElementById("videoMusicId").play();
  }, 100);
  //专辑旋转
  zjxz();
}
eventBus.on("previous", previous);
//------------------上一首END--------------------

//-------------------下一首START------------------
function next() {
  let num = 1; //默认下一首
  // 找到当前播放歌曲在列表中的索引
  const currentIndex = variable.musciList.value.findIndex(
    (item) => item.id === variable.song.value.id
  );
  //判断播放模式
  if (variable.xhIco.value == "ios-shuffle") {
    let sycd = variable.musciList.value.length - currentIndex; //剩余歌曲长度
    num = sycd + Math.floor(Math.random() * sycd); //在剩余歌曲中随机获取一个
  } else if (variable.xhIco.value == "dqxh") {
    num = 0;
  }
  // 计算下一首歌曲的索引
  const nextIndex = (currentIndex + num) % variable.musciList.value.length;
  // 更新当前播放歌曲
  variable.song.value = variable.musciList.value[nextIndex];
  // 直接开始播放
  setTimeout(() => {
    variable.music_play.value = "icon-zanting1";
    document.getElementById("videoMusicId").play();
  }, 100);
  //专辑旋转
  zjxz();
}
eventBus.on("next", next);
//-------------------下一首END------------------

//------------------------选择歌曲开始播放或暂停START--------------
function switchMusic(index, name) {
  //如果选中的是当前播放的正常执行播放或暂停逻辑
  if (variable.song.value.name == name) {
    //当前为暂停，所以开始播放
    if (!variable.sfzzbf.value) {
      // 更新当前播放歌曲
      variable.song.value = variable.musciList.value[index];
      //设为当前正在播放
      variable.sfzzbf.value = true;
      // 直接开始播放
      setTimeout(() => {
        variable.music_play.value = "icon-zanting1";
        document.getElementById("videoMusicId").play();
      }, 100);
      //专辑旋转
      zjxz();
    } else {
      //设为当前未播放
      variable.sfzzbf.value = false;
      //暂停
      document.getElementById("videoMusicId").pause();
      //修改图标为播放
      variable.music_play.value = "icon-bofang1";
      //专辑停止旋转
      clearInterval(variable.intervalIdMusic.value);
    }
  } else {
    //如果选中的不是当前播放的直接更换选中的歌曲开始播放
    //设为当前正在播放
    variable.sfzzbf.value = true;
    // 更新当前播放歌曲
    variable.song.value = variable.musciList.value[index];
    // 直接开始播放
    setTimeout(() => {
      variable.music_play.value = "icon-zanting1";
      document.getElementById("videoMusicId").play();
    }, 100);
    //专辑旋转
    zjxz();
  }
}
eventBus.on("switchMusic", (data) => {
  switchMusic(data.index, data.name);
});
//------------------------选择歌曲开始播放或暂停END--------------

//---------------------音量切换START------------------
function volume() {
  if (variable.horn.value == "icon-24gf-volumeHigh") {
    variable.horn.value = "icon-24gf-volumeLow";
    variable.volumeNum.value = 0.5;
  } else if (variable.horn.value == "icon-24gf-volumeLow") {
    variable.horn.value = "icon-24gf-volumeCross";
    variable.volumeNum.value = 0;
  } else {
    variable.horn.value = "icon-24gf-volumeHigh";
    variable.volumeNum.value = 1;
  }
}
//---------------------音量切换END------------------

//------------------音量显示与隐藏START--------------------
function hornMouseOver() {
  variable.hornState.value = 1;
}
function hornMouseOut() {
  variable.hornState.value = 0;
}
//------------------音量显示与隐藏END--------------------

//打开音乐面板
const openMusicMb = () => {
  variable.musicState.value = !variable.musicState.value;
  //歌曲列表定位到正在播放的歌
  setTimeout(() => {
    document
      .getElementById("gqzgli_" + variable.song.value.id)
      .scrollIntoView({ inline: "center" });
  }, 0);

  if (variable.sfzzbf.value) {
    //设置正在播放的歌的按钮为暂停
    setGqli();
  }
};

//打开音乐列表（导航栏）
function openList() {
  variable.musicListState.value = !variable.musicListState.value;
  //定位歌曲
  setTimeout(() => {
    document
      .getElementById("navGqLi_" + variable.song.value.id)
      .scrollIntoView({
        inline: "center",
        behavior: "smooth",
      });
  }, 0);
}
</script>

<style scoped>
/* ------------歌词---------------------- */
.lyricUl {
  text-align: center;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: auto;
  color: #ddd;
  font-size: 14px;
  font-weight: normal;
  border-left: none;
  letter-spacing: 2px;
  background-color: rgb(121 121 121 / 30%);
}

.lyricUl::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

.lyricLi {
  height: 20px;
}

/* ------------歌词end---------------------- */
.iconfont {
  cursor: pointer;
}
.music {
  margin-left: 5px;
  color: #d0d5f0;
}

.music_title {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  mix-blend-mode: difference;
}

.music_ico {
  width: 65%;
  display: flex;
  justify-content: space-between;
  color: #fff;
  mix-blend-mode: difference;
}

#gdjzan {
  color: #fff;
  mix-blend-mode: difference;
}

.horn {
  margin-top: 10px;
  cursor: pointer;
}

.m_ico {
  cursor: pointer;
}

#jdt {
  width: 99%;
  position: absolute;
  bottom: 0px;
  left: 0;
}

#yyapiDiv {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

/* --------------外部音乐列表--------------------- */
.music_playlist {
  overflow: auto;
  width: 260px;
  height: 240px;
  background-color: rgb(109, 131, 187, 0.9);
  position: fixed;
  top: 70px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.music_playlist::-webkit-scrollbar {
  display: none;
}
.gqlbxd {
  background-color: white;
  padding: 1em;
  padding-bottom: 1.1em;
  border-radius: 15px;
  margin: 1em;
}

.loader {
  display: flex;
  flex-direction: row;
  height: 4em;
  padding-left: 1em;
  padding-right: 1em;
  transform: rotate(180deg);
  justify-content: right;
  border-radius: 10px;
  transition: 0.4s ease-in-out;
}

.loader:hover {
  cursor: pointer;
  background-color: lightgray;
}

.loading {
  display: flex;
  margin-top: 1em;
  margin-left: 0.3em;
}

.load {
  width: 2px;
  height: 33px;
  background-color: limegreen;
  animation: 1s move6 infinite;
  border-radius: 5px;
  margin: 0.1em;
}

.load:nth-child(1) {
  animation-delay: 0.2s;
}

.load:nth-child(2) {
  animation-delay: 0.4s;
}

.load:nth-child(3) {
  animation-delay: 0.6s;
}

.play {
  position: relative;
  left: 0.35em;
  height: 1.6em;
  width: 1.6em;
  clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);
  background-color: black;
  transform: rotate(-90deg);
  align-self: center;
  margin-top: 0.7em;
  justify-self: center;
}

.albumcover {
  position: relative;
  margin-right: 1em;
  height: 40px;
  width: 40px;
  background-color: rgb(233, 232, 232);
  align-self: center;
  border-radius: 5px;
}

.song {
  position: relative;
  transform: rotate(180deg);
  margin-right: 1em;
  color: black;
  align-self: center;
}

.artist {
  font-size: 0.6em;
}

@keyframes move6 {
  0% {
    height: 0.2em;
  }

  25% {
    height: 0.7em;
  }

  50% {
    height: 1.5em;
  }

  100% {
    height: 0.2em;
  }
}

/* --------------外部音乐列表end--------------------- */
</style>